<template>
  <div class="content">
    <div class="main">
      <div class="mainrow1">
        <div class="col1">
          <div class="chats box-card">
            <div class="col-title">
              <img src="@/assets/images/userInspetionCharts.png" style="margin-right:7px;" alt>
              <span style="margin-right:7px;">检测计划数量与原始数据上传情况（按6C类型）</span>
            </div>
            <div id="chart-one1" class="cardMain" align="center" style="margin-top: 10px;" />
          </div>
        </div>
        <div class="col2">
          <div class="chats box-card">
            <div class="col-title">
              <img src="@/assets/images/userInspetionCharts.png" style="margin-right:7px;" alt>
              <span style="margin-right:7px;">检测计划数量与原始数据上传情况（按单位）</span>
            </div>
            <div id="chart4" class="cardMain" align="center" style="margin-top: 10px;" />
          </div>
        </div>
      </div>
      <div class="mainrow2">
        <div class="chats box-card">
          <div class="col-title">
            <img src="@/assets/images/userInspetionCharts.png" style="margin-right:7px;" alt>
            <span style="margin-right:7px;">检测计划数量与原始数据上传情况（按线路）</span>
            <div class="swichbox">
              <el-switch v-model="railTypeSwitch"
                         style="margin-left: 90%"
                         class="switchStyle"
                         active-color="#13ce66"
                         active-text="普铁"
                         inactive-color="#13ce66"
                         inactive-text="高铁"
                         @change="changeRailType" />
            </div>
          </div>
          <div id="chart5" class="cardMain" align="center" style="margin-top: 10px;" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { statistics_cType, statistics_dept, statistics_line } from '@/api/cms/Inspection-management/Check-data-management/CheckDataOverview'
import { mapGetters } from 'vuex'
export default {
  name: 'CheckDataOverview',
  components: {
  },
  data() {
    return {
      railTypeSwitch: 0,
      railTypes: 'GT',
      // railTypes: [],
      loading: {
        loading1: false,
        loading2: false,
        loading3: false
      },
      myChart1: null,
      colorList: ['#4962FC', '#F59A23', '#dd3ee5', '#12e78c', '#fe8104', '#01C2F9', '#F4CB29', '#FD9E06'] // '#4B7CF3'
    }
  },
  created() {},
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapGetters(['sidebar'])
  },
  // eslint-disable-next-line vue/order-in-components
  watch: {
    'sidebar.opened': function(val) {
      var that = this
      setTimeout(function() {
        that.myChart1.resize()
      }, 500)
    }
  },
  mounted() {
    var that = this
    this.timer = setTimeout(function() {
      that.tabshow = false
    }, 5000)
    this.getData()
    // 监听屏幕变化，改变echarts尺寸
    const _this = this
    this.myresize = window.addEventListener('resize', function() {
      _this.$nextTick(_ => {
        if (_this.myChart1)_this.myChart1.resize()
      })
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.myresize)
    if (this.myChart1) {
      this.myChart1.dispose()
      this.myChart1 = null
    }
  },
  methods: {
    getData() {
      this.getChart1()
      this.getChart2()
      this.getChart3()
      // this.getList()
    },
    // 获取下拉数据、字典
    // getList() {
    //   // 线路类型
    //   railtypeList().then(response => {
    //     this.railTypes = response.data
    //   })
    // },
    getChart1() {
      this.loading.loading1 = true
      statistics_cType({}).then(response => {
        const myChart1 = echarts.init(document.getElementById('chart-one1'))
        const color1 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#96CDFD' }, { offset: 1, color: '#4B7CF3' }], false)
        const color2 = new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#F4D793' }, { offset: 1, color: '#F59A23' }], false)
        const colorstyle = [color1, color2]
        const labeldata = {
          show: true,
          position: 'inside',
          formatter: '{time|{d}%}',
          fontSize: 14,
          rich: {
            time: {
              fontSize: 10,
              color: '#fff'
            }
          }
        }
        const option = {
          color: colorstyle,
          title: [
            {
              subtext: [
                '{money|已上传：}' + '{money|' + response.data.c1DetectCount + '}',
                '{money|未上传：}' + '{money|' + (response.data.c1PlanCount - response.data.c1DetectCount) + '}'
              ].join('\n'),
              subtextStyle: {
                rich: {
                  money: {
                    color: '#767676',
                    fontSize: 16,
                    lineHeight: 36
                  }
                }
              },
              left: '10%',
              bottom: '25%'
            },
            {
              subtext: [
                '{money|已上传：}' + '{money|' + response.data.c2DetectCount + '}',
                '{money|未上传：}' + '{money|' + (response.data.c2PlanCount - response.data.c2DetectCount) + '}'
              ].join('\n'),
              subtextStyle: {
                rich: {
                  money: {
                    color: '#767676',
                    fontSize: 16,
                    lineHeight: 36
                  }
                }
              },
              left: 'center',
              bottom: '25%'
            },
            {
              subtext: [
                '{money|已上传：}' + '{money|' + response.data.c4DetectCount + '}',
                '{money|未上传：}' + '{money|' + (response.data.c4PlanCount - response.data.c4DetectCount) + '}'
              ].join('\n'),
              subtextStyle: {
                rich: {
                  money: {
                    color: '#767676',
                    fontSize: 16,
                    lineHeight: 36
                  }
                }
              },
              right: '10%',
              bottom: '25%'
            }
          ],
          legend: {
            top: '0%',
            right: '2%',
            icon: 'circle',
            itemWidth: 10, // 设置宽度
            itemHeight: 10 // 设置高度
          },
          tooltip: {},
          dataset: {
            source: [
              ['product', '1c', '2c', '4c'],
              ['未上传', response.data.c1PlanCount - response.data.c1DetectCount, response.data.c2PlanCount - response.data.c2DetectCount, response.data.c4PlanCount - response.data.c4DetectCount],
              ['已上传', response.data.c1DetectCount, response.data.c2DetectCount, response.data.c4DetectCount]
            ]
          },
          graphic: [
            {
              type: 'text',
              left: '17%',
              top: '33%',
              style: {
                text: '1C',
                textAlign: 'center',
                fill: '#000',
                width: 30,
                height: 30,
                fontSize: 18,
                color: '#4d4f5c',
                fontFamily: 'Microsoft YaHei'
              }
            },
            {
              type: 'text',
              left: '50%',
              top: '33%',
              style: {
                text: '2C',
                textAlign: 'center',
                fill: '#000',
                width: 30,
                height: 30,
                fontSize: 18
              }
            },
            {
              type: 'text',
              left: '81%',
              top: '33%',
              style: {
                text: '4C',
                textAlign: 'center',
                fill: '#000',
                width: 30,
                height: 30,
                fontSize: 18
              }
            }],
          series: [
            {
              type: 'pie',
              radius: [50, 82],
              center: ['18%', '35%'],
              label: labeldata,
              encode: {
                itemName: 'product',
                value: '1c'
              }
              // No encode specified, by default, it is '2012'.
            },
            {
              type: 'pie',
              radius: [50, 82],
              center: ['51%', '35%'],
              label: labeldata,
              encode: {
                itemName: 'product',
                value: '2c'
              }
            },
            {
              type: 'pie',
              radius: [50, 82],
              center: ['83%', '35%'],
              label: labeldata,
              encode: {
                itemName: 'product',
                value: '4c'
              }
            }
          ]
        }
        myChart1.setOption(option)
        this.loading.loading1 = false
      })
    },
    getChart2() {
      this.loading.loading2 = true
      statistics_dept({}).then(response => {
        const myChart = echarts.init(document.getElementById('chart4'))
        const xdata = []
        const ydata = {
          c1PlanCount: [],
          c2PlanCount: [],
          c4PlanCount: [],
          c1DetectCount: [],
          c2DetectCount: [],
          c4DetectCount: []
        }
        for (const key in response.data) {
          xdata.push(key)
          ydata['c1PlanCount'].push(response.data[key].c1PlanCount)
          ydata['c2PlanCount'].push(response.data[key].c2PlanCount)
          ydata['c4PlanCount'].push(response.data[key].c4PlanCount)
          ydata['c1DetectCount'].push(response.data[key].c1DetectCount)
          ydata['c2DetectCount'].push(response.data[key].c2DetectCount)
          ydata['c4DetectCount'].push(response.data[key].c4DetectCount)
        }
        const color1 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#578CFB' }, { offset: 1, color: '#A4F3FE' }], false)
        const color2 = new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#A0E9C0' }, { offset: 1, color: '#E5FF80' }], false)
        const color3 = new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#EAA950' }, { offset: 1, color: '#F9E79D' }], false)
        const color4 = '#406FE2'
        const color5 = '#6FC582'
        const color6 = '#D79C38'
        const colorstyle = [color1, color2, color3, color4, color5, color6]
        const option = {
          color: colorstyle,
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
              align: 'left'
            }
          },
          legend: {
            data: ['1C检测计划', '2C检测计划', '4C检测计划', '1C原始数据', '2C原始数据', '4C原始数据'],
            top: '0%',
            right: '2%',
            width: '300',
            itemWidth: 10, // 设置宽度
            itemHeight: 10 // 设置高度
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '20%'
          },
          xAxis: [
            {
              type: 'category',
              data: xdata.reverse()
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 2000,
              interval: 500,
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series: [
            {
              name: '1C检测计划',
              type: 'bar',
              barWidth: 30,
              barGap: '2%',
              emphasis: {
                focus: 'series'
              },
              data: ydata.c1PlanCount.reverse()
            },
            {
              name: '2C检测计划',
              type: 'bar',
              barWidth: 30,
              barGap: '2%',
              emphasis: {
                focus: 'series'
              },
              data: ydata.c2PlanCount.reverse()
            },
            {
              name: '4C检测计划',
              type: 'bar',
              barWidth: 30,
              barGap: '2%',
              emphasis: {
                focus: 'series'
              },
              data: ydata.c4PlanCount.reverse()
            },
            {
              name: '1C原始数据',
              type: 'line',
              emphasis: {
                focus: 'series'
              },
              data: ydata.c1DetectCount.reverse()
            },
            {
              name: '2C原始数据',
              type: 'line',
              emphasis: {
                focus: 'series'
              },
              data: ydata.c2DetectCount.reverse()
            },
            {
              name: '4C原始数据',
              type: 'line',
              emphasis: {
                focus: 'series'
              },
              data: ydata.c4DetectCount.reverse()
            }
          ]
        }
        myChart.setOption(option)
        this.loading.loading2 = false
      })
    },
    getChart3() {
      this.loading.loading3 = true
      statistics_line({ 'railtype': this.railTypes }).then(response => {
        const myChart = echarts.init(document.getElementById('chart5'))
        const xdata1 = []
        const ydata1 = {
          planCount: [],
          detectCount: []
        }
        for (const key in response.data) {
          xdata1.push(key)
          ydata1['planCount'].push(response.data[key].planCount)
          ydata1['detectCount'].push(response.data[key].detectCount)
        }
        const color1 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#3F49F5' }, { offset: 1, color: '#91E2FC' }], false)
        const color2 = new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#82D7FA' }, { offset: 1, color: '#A9E8D1' }], false)
        const color3 = new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#EAA950' }, { offset: 1, color: '#F9E79D' }], false)
        const colorstyle = [color1, color2, color3]
        const option = {
          color: colorstyle,
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
              align: 'left'
            }
          },
          legend: {
            data: ['检测计划', '原始数据'],
            top: '0%',
            right: '2%',
            icon: 'circle',
            itemWidth: 10, // 设置宽度
            itemHeight: 10 // 设置高度
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: xdata1
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 2000,
              interval: 500,
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series: [
            {
              name: '检测计划',
              type: 'bar',
              barWidth: 30,
              stack: 'C类型',
              emphasis: {
                focus: 'series'
              },
              data: ydata1.planCount
            },
            {
              name: '原始数据',
              type: 'bar',
              barWidth: 30,
              emphasis: {
                focus: 'series'
              },
              data: ydata1.detectCount
            }
          ]
        }
        myChart.setOption(option)
        this.loading.loading3 = false
      })
    },
    changeRailType(val) {
      if (val) {
        this.railTypes = 'PT'
      } else {
        this.railTypes = 'GT'
      }
      this.getChart3()
    }
  }
}
</script>

<style scoped lang="scss">
 .content {
    width: 100%;
    height: 100%;
    background: #f1f4fb;
    padding: 0 20px;
  }
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    padding-bottom: 20px;
    flex-direction: column;
    justify-content: space-between;
  }

  .mainrow1{
    width:100%;
    height:51.2%;
    display: flex;
    justify-content: space-between;
    .col1{width:46.5%;height:100%;display:flex;}
    .col2{width:52.5%;height:100%;}
  }
  .mainrow2{
    width:100%;
    height:47%;
  }
.chats {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
    border-radius: 6px;
    height: 100%;
  }
.chats /deep/.box-card {
  border-radius: 0;
}
.cardMain {
    width: 100%;
    height: 100%;
  }
.col-title{
  height: 50px;
  padding: 0 20px;
  border: 0;
  background-color: #fff !important;
  display:flex;
  align-items: center;
  box-shadow: 0 0 10px 6px rgba(0,47,138,0.04);
  width: 100%;
  .swichbox{
    flex: 1
  }
  .dept-select{
    margin-right: 16px;
    color: white;
    cursor: pointer;
  }
  .dept-select:hover{
    transform: scale(1.04,1.04);
  }
}

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;/* 开关中字体颜色 */
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  /* 开关中关（OFF）字体距离开关左面的距离
		放大OFF将会向右移动缩小向左移动*/
  left: 20px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  /* 开关中开（ON）字体距离开关左面的距离
   与上面一样
  */
  left: -5px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  /* 开关的长度*/
  width: 60px !important;
}
</style>
